<!DOCTYPE html>
<html>
<head>
<!--    Author 林雄-->
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
</head>
<body>
<div class="demoTable">
    车库名称：
    <div class="layui-inline">
        <input class="layui-input" name="park_name" id="park_name" autocomplete="off">
    </div>
    <button type="button" class="layui-btn" data-type="reload" id="bs1">搜索</button>
</div>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<div class="demoTable">
    车牌号：
    <div class="layui-inline">
        <input class="layui-input" name="park_name" id="plate" autocomplete="off">
    </div>
    <button type="button" class="layui-btn" data-type="reload" id="bs2">搜索</button>
</div>
<table class="layui-hide" id="demo2" lay-filter="test2"></table>
<!--自定义的侧边按钮-->
<!--		<script type="text/html" id="barDemo">-->
<!--  			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
<!--&lt;!&ndash;  			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>&ndash;&gt;-->
<!--&lt;!&ndash;  			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>&ndash;&gt;-->
<!--		</script>-->
</body>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.jquery;
        //查询所有车库的信息
        var tableIns1 = table.render({

            elem: '#demo',
            height: 300,
            url: '/tingche/wearhouse/selectAll' //数据接口
            ,
            title: '车库表'
            // 	,
            // page: true //开启分页
            ,
            // toolbar: '#barDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            // 	,
            totalRow: true //开启合计行
            ,
            cols: [
                [ //表头
                    {
                        field: 'parkId',
                        title: '车库ID',
                        sort: true
                    }, {
                    field: 'parkName',
                    title: '车库名称'
                }, {
                    field: 'parkSite',
                    title: '车库地址'
                }, {
                    field: 'currentUse',
                    title: '已用容量'
                }, {
                    field: 'usableCapacity',
                    title: '剩余容量'
                },
                ]
            ]
        });
        //查询具体车库的信息
        var tableIns2 = table.render({
            elem: '#demo2',
            height: 420,
            url: '/tingche/wearhouse/selectPark', //数据接口

            title: '车库内容表',
            page: true //开启分页

            ,
//				//toolbar: '#barDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
//					,
            totalRow: true //开启合计行
            ,
            cols: [
                [ //表头
                    {
                        field: 'park_id',
                        title: '车库ID',
                        sort: true,
                    }, {
                    field: 'plate',
                    title: '车牌'
                }, {
                    field: 'rin_time',
                    title: '入库时间'
                }
                ]
            ]
        });
        //监听头工具栏事件
        // table.on('toolbar(test2)', function(obj) {
        // 	//获取选中的行
        // 	var checkStatus = table.checkStatus(obj.config.id),
        // 		data = checkStatus.data; //获取选中的数据
        // 	switch(obj.event) {
        // 		case 'add':
        // 			layer.msg('添加');
        // 			break;
        // 		case 'detail':
        // 			if(data.length === 0) {
        // 				layer.msg('请选择一行');
        // 			} else if(data.length > 1) {
        // 				layer.msg('只能同时编辑一个');
        // 			} else {
        // 				layer.alert('编辑 [id]：' + checkStatus.data[0].id);
        // 			}
        // 			break;
        // 		case 'delete':
        // 			if(data.length === 0) {
        // 				layer.msg('请选择一行');
        // 			} else {
        // 				layer.msg('删除');
        // 			}
        // 			break;
        // 	};
        // });
        //监听行工具事件
        // table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        // 	var data = obj.data; //获得当前行数据
        // 	var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        // 	var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        // 	if(layEvent === 'detail')
        // 	console.log(tr);
        // 	console.log(data)
        // });
        //实现第一个表格条件查询 并且刷新表格
        $("#bs1").on('click', function () {
            console.log($("#park_name").val());
            tableIns1.reload({
                url: '/tingche/wearhouse/selectByParkName',
                where: { //设定异步数据接口的额外参数，任意设
                    'park_name': $("#park_name").val()
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })
        //实现第二个表格条件查询 并且刷新表格
        $("#bs2").on('click', function () {
            tableIns2.reload({
                url: '/tingche/wearhouse/selectByPlate',
                where: { //设定异步数据接口的额外参数，任意设
                    'plate': $("#plate").val()
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })
    });
</script>

</html>